<!DOCTYPE html>
<html lang="en" ng-app="FMApp">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>File Manager</title>

  <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
  <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="//cdn.bootcss.com/angular.js/1.4.5/angular.min.js"></script>
  <script src="js/angular-file.js"></script>
  <script src="js/app.js"></script>

  <style type="text/css">
    .sortable {
      cursor: pointer;
    }
  </style>
</head>

<body ng-controller="FileManagerCtr as FM">
  <div class="modal fade" id="createFolderModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4>New Folder</h4>
        </div>
        <div class="modal-body">
          <p>Complete Path　{{FM.curFolderPath + FM.newFolderName + '/'}}</p>
          <label class="control-label">Folder Name</label><input class="form-control" autofocus ng-model="FM.newFolderName" />
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" ng-disabled="!FM.newFolderName" ng-click="FM.createFolder(FM.newFolderName)">OK</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="uploadFileModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4>Upload File - Just for small file now</h4>
        </div>
        <div class="modal-body">
          <p>Upload to {{FM.curFolderPath + FM.uploadFile.name}}</p>
          <div class="form-inline">
              <input type="file" class="form-control" autofocus ng-model="FM.uploadFile">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" ng-disabled="!FM.uploadFile" ng-click="FM.upload()">OK</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="renameModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4>Rename</h4>
        </div>
        <div class="modal-body">
          <label class="control-label">New Name</label><input class="form-control" autofocus ng-model="FM.newName" placeholder={{FM.selection[0].name}} />
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" ng-disabled="!FM.newName" ng-click="FM.rename(FM.newName)">OK</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="moveModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4>Move</h4>
        </div>
        <div class="modal-body">
          <label class="control-label">Target</label><input class="form-control" autofocus ng-model="FM.moveTarget" placeholder="{{FM.curFolderPath}}" />
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" ng-disabled="!FM.moveTarget" ng-click="FM.move(FM.moveTarget)">OK</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="archiveModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4>Create Archive</h4>
        </div>
        <div class="modal-body">
          <label class="control-label">Name</label><input class="form-control" autofocus ng-model="FM.archiveTarget" placeholder="Enter name of archive" />
          <div class="checkbox">
            <label><input type="checkbox" ng-init="FM.archiveEmbedDirs = true" ng-model="FM.archiveEmbedDirs"> Embed directories in archive</label>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" ng-disabled="!FM.archiveTarget" ng-click="FM.archive(FM.archiveTarget)">Create</button>
        </div>
      </div>
    </div>
  </div>

  <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">File Manager</a>
      </div>
    </div>
  </nav>

  <div class="container">
    <div class="btn-toolbar">
      <button type="button" class="btn btn-default" ng-disabled="FM.btnDisabled('download')" ng-click="FM.download()"><span class="glyphicon glyphicon-download"></span> Download</button>
      <button type="button" class="btn btn-default" ng-disabled="FM.btnDisabled('delete')" ng-click="FM.delete()"><span class="glyphicon glyphicon-remove"></span> Delete</button>
      <button type="button" class="btn btn-default" ng-disabled="FM.btnDisabled('move')" data-toggle="modal" data-target="#moveModal"><span class="glyphicon glyphicon-random"></span> Move</button>
      <button type="button" class="btn btn-default" ng-disabled="FM.btnDisabled('rename')" data-toggle="modal" data-target="#renameModal"><span class="glyphicon glyphicon-font"></span> Rename</button>
      <button type="button" class="btn btn-default" ng-disabled="FM.btnDisabled('archive')" data-toggle="modal" data-target="#archiveModal" ng-click="FM.updateArchiveName()"><span class="glyphicon glyphicon-download-alt"></span> Archive</button>
      <button type="button" class="btn btn-default pull-right" ng-disabled="FM.btnDisabled('create_folder')" data-toggle="modal" data-target="#createFolderModal"><span class="glyphicon glyphicon-plus-sign"></span> New Folder</button>
      <button type="button" class="btn btn-default pull-right" ng-disabled="FM.btnDisabled('upload_file')" data-toggle="modal" data-target="#uploadFileModal"><span class="glyphicon glyphicon-upload"></span> Upload</button>
    </div>

    <ol class="breadcrumb">
      <span class="glyphicon glyphicon-home"></span>
      <li ng-repeat="p in FM.curBreadCrumbPaths"><a href={{p.path}}>{{p.name}}</a></li>
    </ol>

    <table class="table table-hover table-striped">
      <thead>
        <tr class="sortable">
          <th><input type="checkbox" value="" ng-model="FM.selectAll"></th>
          <th>Type</th>
          <th>Name</th>
          <th>Size</th>
          <th>Time</th>
        </tr>
      </thead>
      <tbody>
      <tr class="sortable" ng-repeat="file in FM.curFiles | orderBy:'folder'">
        <td><input type="checkbox" value="{{file.name}}" ng-model="file.selected"></td>
        <td ng-click="FM.clickFile(file)"><span class="{{file.folder ? 'glyphicon glyphicon-folder-open' : 'glyphicon glyphicon-file'}}"></span></td>
        <td ng-click="FM.clickFile(file)"><a>{{file.name}}</a></td>
        <td>{{file.humanSize}}</td>
        <td>{{file.humanTime}}</td>
      </tr>
      </tbody>
    </table>

    <div id="successAlert" class="alert alert-success" role="alert" style="display: none">
      <span>{{FM.successData}}</span>
    </div>

    <div id="errorAlert" class="alert alert-danger" role="alert" style="display: none">
      <button type="button" class="close" data-dismiss="alert" alert-label="Close">
        <span aria-hidden="true">&times</span>
      </button>
      <strong>Error!</strong>
      {{FM.errorData}}
    </div>

  </div>

</body>
</html>
